<template>
  <view class='homeworkManage'>
	  <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption"
	    @up="upCallback">
		  <view class="hk-box">
			  <view class="hk-list" @click="goDetails(item)" v-for="item in data_list.data" :key="item.id">
				  <image class="left-image" :src="getImgUrl(item.thumbnail)" mode="aspectFill"></image>
				  <view class="right-content">
					  <view class="title">{{ item.title}}</view>
					  <view class="desc">{{ item.description }}</view>
				  </view>
			  </view>
		  </view>
	  </mescroll-body>
  </view>
</template>

<script>
  import { ImgUrlPrefix } from '@/utils/util.js'
  import * as homeworkApi from '@/api/homework'
  import { getMoreListData } from '@/core/app'
  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
  // 每页记录数量
  const pageSize = 15
  export default {
    mixins: [MescrollMixin],
    data() {
      return {
		  // 上拉加载配置
		  upOption: {
		    // 首次自动执行
		    auto: true,
		    // 每页数据的数量; 默认10
		    page: { size: pageSize },
		    // 数量要大于4条才显示无更多数据
		    noMoreSize: 4,
		    // 空布局
		    empty: {
		      tip: '暂无数据'
		    }
		  },
         data_list: {
			 data: []
		 }
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        // this.getHomeworkList()
    },

    methods: {
		/**
		 * 上拉加载的回调 (页面初始化时也会执行一次)
		 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
		 * @param {Object} page
		 */
		upCallback(page) {
		  console.log(page)
		  const app = this
		  // 设置列表数据
		  app.getHomeworkList(page.num)
			.then(list => {
			  console.log(list,'list')
			  const curPageLen = list.items.length
			  const totalSize = list.total
			  app.mescroll.endBySize(curPageLen, totalSize)
			})
			.catch(() => app.mescroll.endErr())
		},
		
		// 课程列表
		getHomeworkList(pageNo =1) {
			const app = this
			return new Promise((resolve, reject) => {
			homeworkApi.homeworkList({ page: pageNo }, { load: false })
				.then(result => {
				  // 合并新数据
				  const newList = result.data
				  app.data_list.data = getMoreListData(newList, app.data_list, pageNo)
				  console.log('app.data_list.data', app.data_list.data)
				  resolve(newList)
				})
			})
		},
        goDetails(val) {
			this.$navTo('pages/user/homework/homeworkList', { courseId: val.id})
		},
		// 图片地址拼接
		getImgUrl(val) {
		    const url = ImgUrlPrefix(val)
		    return url
		},
    },
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		console.log('下拉刷新')
	  // 获取首页数据
	  // this.getHomeworkList()
	  uni.stopPullDownRefresh()
	},
  }
</script>

<style lang="scss" scoped>
 .homeworkManage{
	 .hk-box{
		  padding: 16rpx;
		 .hk-list{
			 display: flex;
			 background-color: #fff;
			 border-radius: 14rpx;
			 padding: 30rpx;
			 margin-bottom: 20rpx;
			 .left-image{
				 width: 300rpx;
				 height: 200rpx;
				 border-radius: 14rpx;
				 margin-right: 20rpx;
				 object-fit: cover;
			 }
			 .right-content{
				 flex:1;


			 }
			 .title{
				 color: #333;
				 font-size: 32rpx;
			 }
			 .desc{
				 margin-top: 10rpx;
				 color: #999;
				 width:100%;
				 font-size: 24rpx;
				 line-height: 40rpx;
				 display: -webkit-box;
				 -webkit-box-orient: vertical;
				 -webkit-line-clamp: 3; /* 显示三行，超出部分使用省略号 */
				 overflow: hidden;
			 }
		 }
	 }
 }
</style>